<template>
  <div class="identity-item" v-if="identity">
    <el-image :src="identity.image" class="img"></el-image>
    <div class="main">
      <div class="info">
        <div class="name">{{ identity.name }}</div>
        <div class="description">
          商店介绍：
          <span class="limit-word">{{ identity.description }}</span>
        </div>
        <el-tag type="primary" v-for="item in identity.tags">{{ item }}</el-tag>
      </div>
      <div class="data">
        <div class="count">商品种类：0</div>
        <div class="rate">
          评分：
          <el-rate
            v-model="identity.rate"
            disabled
            show-score
            text-color="#ff9900"
            :colors="colors"
            score-template="{value} points"
          />
        </div>
      </div>
    </div>
    <div class="action">
      <el-button type="primary" :icon="Edit" @click="openIdentity" />
      <el-popconfirm title="删除商店?" @confirm="deleteIdentityInfo">
        <template #reference>
          <el-button type="primary" :icon="Delete" />
        </template>
      </el-popconfirm>
    </div>
  </div>
</template>

<script setup>
import { deleteIdentity } from '@/api/shop'
import { getFile } from '@/utils/fileutils'
import { Delete, Edit } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import '@/common/variables.less'

const emit = defineEmits(['openIdentity', 'close'])

const props = defineProps({
  obj: Object,
})

const identity = props.obj

onMounted(async () => {
  identity.image = await getFile(identity.image)
})

// 评分颜色
const colors = ref(['#99A9BF', '#F7BA2A', '#FF9900'])

// 打开编辑页面
const openIdentity = () => {
  emit('openIdentity', identity.id)
}

// 删除商店
const deleteIdentityInfo = async () => {
  const res = (await deleteIdentity(identity.id)).data
  if (res.success) {
    ElNotification({
      title: '提示',
      message: '删除商店成功',
      type: 'success',
    })
    emit('close')
  } else {
    ElNotification({
      title: '提示',
      message: '删除商店失败',
      type: 'error',
    })
  }
}
</script>

<style scoped less="scss">
.identity-item {
  display: flex;

  width: 90%;
  height: 80px;
  background-color: #f5faf6;
  border-radius: 8px;
  transition: all 0.3s;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);

  .img {
    width: 70px;
    height: 70px;
    margin: 5px 0 0 5px;
    cursor: pointer;
  }

  .name,
  .description,
  .count,
  .rate {
    font-size: 14px;
    color: grey;
  }

  .main {
    display: flex;
    gap: 60px;

    margin: 5px 0 0 5px;
    width: 900px;

    .info {
      width: 250px;

      .el-tag {
        margin-left: 3px;
      }
    }
  }

  .action {
    display: flex;

    align-items: center;
  }
}

.identity-item:hover {
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
}
</style>
